<template>
    <view class="set-password">
        <view class="title">设置密码</view>
        <view class="subtitle">请输入6~12位密码</view>
        <view class="input-area">
            <u-input v-model="password" :password="showPasswordOne" placeholder="请输入6~12位密码" border="none" :customStyle="{ borderRadius: '40rpx' }">
                <template slot="prefix">
                    <view class="solt-left">
                        <u-icon name="lock-fill" size="20" color="#909399"></u-icon>
                    </view>
                </template>
                <template slot="suffix">
					<u-icon @click="showPasswordHandle(1)" :name="seeIconOne" color="#677585FF" size="20"></u-icon>
				</template>
            </u-input>
        </view>
        <view class="input-area">
            <u-input v-model="passwordTwo" :password="showPasswordTwo" placeholder="请再次输入新的登录密码" border="none" :customStyle="{ borderRadius: '40rpx' }">
                <template slot="prefix">
                    <view class="solt-left">
                        <u-icon name="lock-fill" size="20" color="#909399"></u-icon>
                    </view>
                </template>
                <template slot="suffix">
					<u-icon @click="showPasswordHandle(2)" :name="seeIconTwo" color="#677585FF" size="20"></u-icon>
				</template>
            </u-input>
        </view>
        <u-button @click="setPasswordHandle" text="提交" color="#4DACB1FF" style="width: 90%; margin-top: 60rpx; border-radius: 50rpx;"></u-button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 是否显示密码
            showPasswordOne: true,
            seeIconOne: 'eye-fill',
            showPasswordTwo: true,
            seeIconTwo: 'eye-fill',

            password: null,
            passwordTwo: null,
            formData: {}
        }
    },
    onLoad(options) {
        const eventChannel = this.getOpenerEventChannel();
        let that = this
        // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
        eventChannel.on('emitDataHandle', function(data) {
            let tempObj = JSON.parse(JSON.stringify(data.data))
            that.formData = tempObj
        })
    },
    methods: {
        setPasswordHandle() {
            if(!this.password) return uni.showToast({
                title: '新密码不能为空',
                icon: 'none'
            })
            if (this.containsSpace(this.password)) return uni.showToast({
                title: '密码不能包含空格',
                icon: 'none'
            })
            if (this.password.length < 6 || this.password.length > 12) return uni.showToast({
                title: '密码在6-12位之间',
                icon: 'none'
            })
            if(this.password != this.passwordTwo) return uni.showToast({
                title: '两次密码不一致',
                icon: 'none'
            })
            const formDataCopy = JSON.parse(JSON.stringify(this.formData));
            formDataCopy['password'] = this.password
            this.$http.post('/app/resetPwd', formDataCopy).then(res => {
                if (res.data.code == 200) {
                    uni.showToast({ title: '设置成功', icon: 'success', duration: 1000 });
                    setTimeout(() => {
                        uni.reLaunch({
                            url: '/pages/login/index'
                        });
                    }, 1000)
                } 
            })
        },
        containsSpace(str) {
            return str.includes(' ');
        },
        close() {
            this.show = false
        },
        showPasswordHandle(type) {
            if(type == 1) {
                this.showPasswordOne = !this.showPasswordOne;
                this.seeIconOne = this.showPasswordOne ? 'eye-fill' : 'eye-off';
            }  else if(type == 2) {
                this.showPasswordTwo = !this.showPasswordTwo;
                this.seeIconTwo = this.showPasswordTwo ? 'eye-fill' : 'eye-off';
            }

        }
    }
}
</script>

<style lang="scss" scoped>
    .set-password {
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {    
            padding-top: 60rpx;
            font-size: 64rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
        }
        .subtitle {
            margin-top: 20rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
        }
        .input-area {
            width: 80%;
            margin: 0 auto;
            margin-top: 60rpx;
            padding: 20rpx 40rpx;
            background: #FFFFFFFF;
            border-radius: 100rpx;
            .solt-left {
                display: flex;
                align-items: center;
                .country {
                    margin-left: 20rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(12, 16, 25, 1);
                    margin-right: 12rpx;
                }
            }
        }
    }
</style>